<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>使用props传递数据__数据验证</title>
</head>
<body>

<div id="app">
    <my-component :obj="12"></my-component>
    <my-component :obj="Obj"></my-component>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     *
     * 当props需要进行数据验证时，必须采用对象写法，而不是数组写法。
     * 一般当你的组件需要提供给别人使用时，推荐都进行数据验证。
     *
     **/

    Vue.component('my-component', {
        props: {
            //必须是数字类型
            propA: Number,
            //必须是字符串或数字类型
            propB: [String, Number],
            //布尔值，如果没有定义，默认值就是true
            propC: {
                type: Boolean,
                default: true
            },
            //数字，而且是必传
            propD: {
                type: Number,
                required: true
            },
            //如果是数组或对象，默认值必须是一个函数来返回
            propE: {
                type: Array,
                default: function () {
                    return [];
                }
            },
            //自定义一个验证函数
            propF: {
                validator: function (value) {
                    return value > 10;
                }
            }
        }
    });

    /**
     * 验证的type类型可以是：String、Number、Boolean、Object、Array、Function、type也可以是一个自定义构造器，使用instanceof检测。
     * 当props验证失败时，在开发版本下会在控制台抛出一条警告。
     * **/
    function Obj() {
        this.name = 1;
        this.age = 2;
    }

    var obj = new Obj();
    console.log(new Obj());

    Vue.component('my-component', {
        props: {
            //自定义构造器测试
            obj: Obj
        },
        template: "<div>自定义构造器测试--{{ obj }}</div>"
    });

    var app = new Vue({
        el: "#app",
        data: {
            obj: obj,
        }
    })


</script>
</body>
</html>
